<template>
  <div>
    
		<div id="main">
			<div class="sku-box store-content">
				<div class="sort-option">
					<ul class="line clear">
						<li><a href="javascript:;" class="active">综合排序</a></li>
						<li><a href="javascript:;" class="">销量排序</a></li>
						<li><a href="javascript:;" class="">价格低到高</a></li>
						<li><a href="javascript:;" class="">价格高到低</a></li>
					</ul>
				</div>
				<div class="gray-box">
					<div class="item-box">
						<!-- <div class="item">
							<div>
								<div class="item-img"><img alt="Smartisan 快充移动电源 10000mAh" src="http://image.smartisanos.cn/resource/ae40a16324658c192c7361d829f603bd.jpg?x-oss-process=image/resize,w_206/quality,Q_80/format,webp" style="opacity: 1;">
								</div>
								<h6>Smartisan 快充移动电源 10000mAh</h6>
								<h3 >10000mAh 双向快充、轻盈便携、高标准安全保护</h3>
								<div class="params-colors">
									<ul class="colors-list">
										<li><a href="javascript:;" class="active"><img src="http://img01.smartisanos.cn/attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/20X20.jpg"></a></li>
									</ul>
								</div>
								<div class="item-btns clearfix">
									<span class="item-gray-btn"><a href="javascript:;" target="_blank">查看详情</a> </span><span class="item-blue-btn">加入购物车 </span>
								</div>
								<div class="item-price clearfix">
									<i>¥</i><span>199.00</span>
								</div>
								<div class="discount-icon">false</div>
								<div class="item-cover">
									<a href="javascript:;" target="_blank"></a>
								</div>
							</div>
						</div> -->
						<div class="item" v-for="(item,index) in glist" :key="index">
							<div>
								<div class="item-img">
                  <img alt="" :src="item.stock_info[0].image" style="opacity: 1;">
								</div>
								<h6>{{item.stock_info[0].title}}</h6>
								<h3 >{{item.stock_info[0].sub_title}}</h3>
								<div class="params-colors">
									<ul class="colors-list">
										<li v-for="(itm,idx) in item.stock_info" :key="idx">
                      <a :style="{background:itm.detail.color}" href="javascript:;" class="active">
                      </a>
                    </li>
									</ul>
								</div>
								<div class="item-btns clearfix">
									<span class="item-gray-btn"><a href="javascript:;" target="_blank">查看详情</a> </span><span class="item-blue-btn">加入购物车 </span>
								</div>
								<div class="item-price clearfix">
									<i>¥</i><span>{{item.stock_info[0].price}}</span>
								</div>
								<div class="discount-icon">false</div>
								<div class="item-cover">
									<a href="javascript:;" target="_blank"></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
  </div>
</template>

<script>
  import request from '../utils/request'
  export default {
    data() {
      return {
        glist: [],
      }
    },
    created () {
      request.get('/list').then(res=>{
        console.log(res);
        this.glist = res.data
      })
    },
  }
</script>

<style lang="less" scoped>
@import url('../assets/css/goodsList.css');
</style>